<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        /* 
        基于Ajax发送一个get请求
        1. 查看 xmlHttpRequest的构造函数，如何创建xmlHttpRequest。
        2. XMLHttpRequest.open() 方法初始化一个新创建的请求，或重新初始化一个请求。
            xhrReq.open(method, url, async, user, password);
        3. XMLHttpRequest.send(body) 方法用于发送 HTTP 请求
            比如说是POST请求就需要把POST请求的参数传入，如果是get请求就不需要传入参数。
        4. 处理服务端的响应内容
     */

        //  1.创建一个XMLHttpRequest对象
        const request = new XMLHttpRequest();
        // 2.方法初始化一个新创建的请求，GET请求的参数在？后面
        request.open("GET", "http://www.biwuit.cn/spboot/userLoginGetRequest?username=admin&password=66666");
        // 3.发送请求到服务器
        request.send();
        //4. 如何接受服务端的响应的内容呢？
        /* 
            通过onreadystatechange来监听服务端响应回来的结果。
            只读属性 XMLHttpRequest.status 返回了服务端的响应状态码
            XMLHttpRequest.responseText 在一个请求被发送后，从服务器端返回文本。
    
            onreadystatechange事件：当 readyState 的值改变的时候，callback 函数会被调用
         */
        request.onreadystatechange = function () {
            //响应完成并且响应成功的话，就回去服务端影响的内容。
            if (request.readyState == 4 && request.status == 200) {
                console.log(request.responseText);
            }
        };
    </script>
</body>

</html>